<script setup lang="ts">
import {ref} from "vue";

const count = ref(0)

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}

function say(message) {
  alert(message)
}

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>

<template>
  <div>
    <h1>事件处理</h1>
    <p>
      我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或
      @click="handler"。
    </p>
    <div>
      <h2>内联事件处理器</h2>
      <button @click="count++">点击 {{ count }} 次</button>
      <p>按钮点击了 {{ count }} 次。</p>
    </div>
    <div>
      <h2>方法事件处理器</h2>
      <!-- `greet` 是上面定义过的方法名 -->
      <button @click="greet">Greet</button>
      <p>点击按钮后会弹出对话框，显示 "Hello Vue.js!"。</p>
    </div>
    <div>
    </div>
    <div>
      <button @click="say('hello')">Say hello</button>
      <button @click="say('bye')">Say bye</button>
    </div>
    <div>
      <!-- 使用特殊的 $event 变量 -->
      <button @click="warn('Form cannot be submitted yet.', $event)">
        Submit
      </button>

      <!-- 使用内联箭头函数 -->
      <button @click="(event) => warn('Form cannot be submitted yet.', event)">
        Submit
      </button>
    </div>
  </div>
</template>

<style scoped>

</style>